<template>
    <div class="kanban-column" :data-column-value="列.状态">
        <div class="kanban-column-header">
            <span class="kanban-column-title">
                <span class="indicator-pill "></span>
                <span class="kanban-title ellipsis">{{ 列.状态 }}</span>
            </span>
        </div>
        <Transition name="fade">
            <div v-if="showAddCard" class="add-card">
                <div class="ellipsis">
                    + 添加card
                </div>
            </div>
        </Transition>
        <div class="kanban-card new-card-area">
            <textarea name="title"></textarea>
        </div>
        <div class="kanban-cards q-gutter-sm" ref="kanbanCardsRef" :style="{ height: kanbanCardsHeight }" :data-列名="列.状态">
            <template v-for="item in 过滤卡组" :key="item.id">
                <a看板卡 :卡="item" />
            </template>
        </div>
    </div>
</template>

<script setup>
import { reactive, nextTick, onMounted, computed, ref } from 'vue';
import Sortable from 'sortablejs';
import a看板卡 from './a看板卡.vue';

const props = defineProps({
    列: {},
    卡组: Array,
});

const 过滤卡组 = computed(() => {
    return props.卡组.filter((item) => {
        return item.状态 === props.列.状态;
    });
});

const kanbanCardsRef = ref(null);
const showAddCard = ref(true);
const kanbanCardsHeight = ref('auto');

function setup_sortable() {
    Sortable.create(kanbanCardsRef.value, {
        group: "cards",
        animation: 150,
        dataIdAttr: "data-name",
        forceFallback: true,
        onStart: () => {
            showAddCard.value = false;
            kanbanCardsHeight.value = "100vh";
        },
        onEnd: (e) => {
            console.log(`e 👉`, e);
            showAddCard.value = true;
            kanbanCardsHeight.value = "auto";
            // update order
            const from列名 = e.from.dataset.列名;
            const to列名 = e.to.dataset.列名;
            const args = {
                from列名,
                to列名,
                oldIndex: e.oldIndex,
                newIndex: e.newIndex,
            };
            console.log(args); // 可以根据需求进一步处理 args
        },
        onAdd: () => { },
    });
}

onMounted(() => {
    setup_sortable();
});
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>